<template>
    <div class="page" :style="'text-align:'+align">
        <div class="des inline-block ver-mid">
            <span>共&nbsp;{{page.total}}&nbsp;条</span>
        </div>
        <div class="opera inline-block ver-mid">
            <button class="btn_item opera_btn" @click.stop="active(1)"><i class="bi bi-chevron-bar-left"></i></button>
            <button class="btn_item opera_btn" @click.stop="pre"><i class="bi bi-chevron-left"></i></button>
            <span class="btn_item opera_btn" style="font-size:14px;">
                {{page.current}}/{{page.pages}}
            </span>
            <button class="btn_item opera_btn" @click.stop="next"><i class="bi bi-chevron-right"></i></button>
            <button class="btn_item opera_btn" @click.stop="active(page.pages)"><i class="bi bi-chevron-bar-right"></i></button>
        </div>
    </div>
</template>
<script>
import { ref,watch } from 'vue'
export default {
    name:'g-simple-page',
    props:{
        data:{
            type:Object,
            default:{}
        },
        align:{
            type:String,
            default:'right'
        }
    },
    setup(props) {
        let page = ref(props.data);
        let align = ref(props.align);

        watch(()=>props.data,(val)=>{
            page.value = val;
        })


        

        let active=(pg)=>{
            page.value.current = pg;
            page.value.fun(page.value.current);
        }

        let pre = ()=>{
            if(page.value.current > 1){
                page.value.current = --page.value.current;
                page.value.fun(page.value.current);
            }
            
        }
        let next = ()=>{
            if(page.value.current < page.value.pages){
                page.value.current = ++page.value.current;
                page.value.fun(page.value.current);
            }
            
        }
        return {
            // 变量
            page,
            align,
            // 方法
            active,
            pre,
            next
        }
    }
}
</script>
<style scoped>
    .page{
        width: 100%;
        padding: 10px 0;
    }
    .btn_item{
        cursor: pointer;
        font-size: 14px;
        width: 20px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        background: none;
        border: 1px solid #d9d9d9;
        transition: .3s;
        padding: 0;
    }
    .opera_btn{
        border: none;
    }
    
    .des{
        font-size: 14px;
    }
    .opera{
        border: 1px solid #d9d9d9;
        margin-left: 10px;
        border-radius: 5px;
        padding: 0 5px;
    }
</style>